<template>
    <div class="wrapper">
        <h1 class="title">文章列表</h1>
        <div class="article">
            <el-input v-model="input" style="width:40%" clearable @input="getMyBlogList" placeholder="请输入文章标题"></el-input>  
            <el-button  class="addBtn" type="primary" @click="getMyBlogList"  icon="el-icon-search">搜索</el-button> 
            <el-button class="addBtn" @click="handleAdd">新增+</el-button>
            <el-table 
                :data="articleList" 
                border stripe max-height="700px"
                v-loading="loading"  
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <el-table-column
                  type="index"
                   label="序号"
                  width="50">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="文章标题"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="文章类型"
                    width="180">
                     <template slot-scope="{row}">
                         {{ row.type === 1 ?'时间轨迹':'技术博客' }}
                     </template>
                </el-table-column>
                <el-table-column
                    label="上传日期"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleLook(scope.row)">查看</el-button>
                        <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelect(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                articleList:[],
                page:1,
                size:10,
                total:10,
                loading:true,
                input:''
            }
        },
        methods:{
            handleAdd() {
                this.$router.push({name:'editArticle'})
            },
            handleLook(row) {
                let id = row.id
                this.$router.push({path:'/detail/'+id})
            },
            handleEdit(row) {
                let id = row.id;
                this.$router.push({name:'editArticle',params: {id:id}})
            },
            handleDelect(row){
                let id = row.id
                this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 发起删除的网络请求
                    this.$http.post('/api/article/delete',{
                        article_id:id
                    })
                    .then(res => {
                        if(res.data.code === 0){
                            //发起删除请求操作

                            this.$notify({
										title: '提示',
										message: `${id}文章删除成功!`,
										type: 'success'
									});
                             this.getMyBlogList()
                        }
                    }).catch(e=>{
                        console.log(e)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            getMyBlogList(){
                this.loading = true
               this.$http.get(`/api/article/myList?page=${this.page}&size=${this.size}&search=${this.input}`).then(res => {
                 console.log(res);
                 if(res.data.code === 0){
                    this.articleList = res.data.data.list
                    this.total = res.data.data.total
                 }
                 this.loading = false
               })
            },
            handleSizeChange(cur){
                this.size = cur
                this.getMyBlogList()

            },
            handleCurrentChange(cur){
                this.page = cur
                this.getMyBlogList()

            }
        },
        created() {
            this.getMyBlogList()
        },
    }
</script>

<style lang="scss" scoped>
.title {
    margin: 30px 0;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
}
.article {
    .addBtn {
        float: right;
        margin-bottom: 20px;
    }
}
/deep/ .el-table {
    .cell {
        text-align: center;
    }
}
.page{
    background-color: #fff;
}
</style>